<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>违章查询</title>
    <style>
        #result td {
            text-align: center;
        }
    </style>
</head>
<body>
    {% verbatim %}
    <div id="result">
        <input type="text" v-model="searchKey" size="30" placeholder="请输入车牌号或车主姓名">
        <button @click="search()">查询</button>
        <hr>
        <table>
            <tr>
                <th width="100">车牌号</th>
                <th width="100">车主姓名</th>
                <th width="150">违章原因</th>
                <th width="180">违章时间</th>
                <th width="180">处罚方式</th>
                <th width="100">是否受理</th>
                <th width="120">操作</th>
            </tr>
            <tr v-for="record in records">
                <td>{{ record.carno }}</td>
                <td>{{ record.owner }}</td>
                <td>{{ record.reason }}</td>
                <td>{{ record.makedate }}</td>
                <td>{{ record.punish }}</td>
                <td>
                    <span v-if="record.dealed">已受理</span>
                    <span v-if="!record.dealed">未受理</span>
                </td>
                <td>
                    <button @click="handle(record)" :disabled="record.dealed">受理</button>
                    <button @click="remove(record)">删除</button>
                </td>
            </tr>
        </table>
        <div>
            <button @click="firstPage()">首页</button>&nbsp;&nbsp;
            <button @click="prevPage()">上一页</button>&nbsp;&nbsp;
            第{{ currentPage }}页/共{{ totalPage }}页&nbsp;&nbsp;
            <button @click="nextPage()">下一页</button>&nbsp;&nbsp;
            <button @click="lastPage()">末页</button>
        </div>
    </div>
    {% endverbatim %}
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#result',
            data: {
                searchKey: '',
                records: [],
                currentPage: 1,
                totalPage: 0,
                url: '/records/'
            },
            created() {
                this.getRecords()
            },
            methods: {
                getRecords() {
                    let url = `/records/?page=${this.currentPage}&carno_or_owner=${this.searchKey}`
                    fetch(url, {})
                        .then(resp => resp.json())
                        .then(json => {
                            this.records = json.results
                            this.totalPage = parseInt((json.count - 1) / 5) + 1
                        })
                },
                search() {
                    this.currentPage = 1
                    this.getRecords()
                },
                handle(record) {
                    record.dealed = true
                    fetch(`/records/${record.no}/`, {
                        method: 'PUT',
                        body: JSON.stringify(record),
                        headers: {
                            'content-type': 'application/json'
                        }
                    })
                },
                remove(record) {
                    fetch(`/records/${record.no}/`, {method: 'DELETE'})
                        .then(resp => resp.status)
                        .then(status => {
                            if (status == 204) {
                                let index = this.records.indexOf(record)
                                this.records.splice(index, 1)
                            }
                        })
                },
                firstPage() {
                    this.currentPage = 1
                    this.getRecords()
                },
                prevPage() {
                    if (this.currentPage > 1) {
                        this.currentPage -= 1
                        this.getRecords()
                    }
                },
                nextPage() {
                    if (this.currentPage < this.totalPage) {
                        this.currentPage += 1
                        this.getRecords()
                    }
                },
                lastPage() {
                    this.currentPage = this.totalPage
                    this.getRecords()
                }
            }
        })
    </script>
</body>
</html>